{% extends 'base.html' %}
{% block title %}博客详情{% endblock %}
{% block head %}
    <script type="module" src="{% static 'js/detail.js' %}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <!-- and it's easy to individually load additional languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
{% endblock %}
{% block content %}

    <main class="container bg-white p-3 rounded">
        <h1>{{ blog.title }}</h1>
        <div class="mt-3 text-bg-light  p-3 mb-5 bg-body-tertiary rounded ">
            <img src="{% static 'images/avatar.jpg' %}" alt="" class="rounded-circle" width="30" height="30">
            <span class="ml-3">{{ blog.author.username }}</span>
            <span class="ml-3">发布时间：{{ blog.created_at |date:"Y-m-d H:i:s" }}发布</span>
        </div>
        <div class="mt-2">
            {{ blog.content | safe }}
        </div>
        <div class="mt-2">
            <span class="badge bg-secondary">{{ blog.category.name }}</span>
        </div>
        <div class="mt-5">
            <h3>
                文章评论({{ blog.comments.count }})
            </h3>
            <div class=" mt-3">
                <form action="" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="blog_id" value="{{ blog.id }}">
                    <div class="form-group">
                        <textarea class="form-control" rows="2" placeholder="请输入评论内容"
                                  name="comment"></textarea>
                        <button type="submit" class="btn btn-primary mt-2 text-end" id="comment-btn">提交评论</button>
                    </div>
                </form>
            </div>
            <div class="mt-3">
                <ul class="list-group list-group-flush">
                    {% for comment in blog.comments.all %}
                        <li class="list-group-item text-bg-light mb-2 shadow-sm p-3 mb-3 bg-body-tertiary rounded">
                            <div class="d-flex justify-content-between text-body-secondary">
                                <div>
                                    <img src="{% static 'images/avatar.jpg' %}" alt="" class="rounded-circle" width="30"
                                         height="30">
                                    <span class="ml-2">{{ comment.author.username }}</span>
                                </div>
                                <div class="create-time"
                                     data-immersive-translate-walked="6cf1159a-104a-4e01-a4c1-6efe9b3888e0"
                                     data-immersive-translate-paragraph="1">
                                    {{ comment.created_at |date:"Y-m-d H:i:s" }}
                                </div>
                            </div>
                            <div class="mt-2">
                                {{ comment.content }}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>

        </div>


    </main>


{% endblock %}